<%--
  Created by IntelliJ IDEA.
  User: colin
  Date: 2017/5/21
  Time: 12:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/header.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${style}/front/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="${style}/animate.min.css">
    <!-- input -->
    <link rel="stylesheet" type="text/css" href="${style}/input.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${Bootstrap}/css/bootstrap.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${style}/front/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${style}/front/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${style}/front/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${style}/front/fw.css" media="screen">
    <!-- BeAlert -->
    <link rel="stylesheet" type="text/css" href="${Resource}/BeAlert/BeAlert.css" media="screen">
</head>
<body>
<%--herder--%>
<jsp:include page="../header.jsp"/>


<section class="m-t-0">
    <div class="container m-t-30">
        <h3 class="title f-30">个人中心</h3>
        <%--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>--%>
        <div class="row ht-tabs ht-tabs-product">
            <div class="col-md-3 col-lg-2 pull-left-xs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="panel panel-default">
                        <a href="/front/mybuycar/buycarlist">购物车</a>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">我的订单</a>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li>
                                    <a href="/front/purchase/alls">全部</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/waits">待付款</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/payed">待发货</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/sent">待收货</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/done">已完成</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">优惠券</a>
                        <div id="collapse2" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetail">全部优惠券</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetailbyMycoupons">我的优惠券</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default active">
                        <a href="/front/wallet">我的钱包</a>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">个人信息管理</a>
                        <div id="collapse4" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation">
                                    <a href="/front/persion/showMyInfo">我的信息</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/address/showaddress">地址管理</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/persion/showupdatepwd">修改密码</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-md-9 col-lg-10">
                <!-- Tab panes -->
                <div class="content">
                    <input type="text" value="${pageIndex}" hidden id="pageIndex">
                    <input type="text" value="${pageCount}" hidden id="pageCount">
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h3 class="panel-title">我的钱包</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="f-20">我的余额: <i class="fa fa-rmb"></i> ${mine.balance}</label>
                                        </div>
                                        <div class="col-md-4 pull-right">
                                            <div class="btn-group">
                                                <a class="btn btn-info" href="/front/index/showindex">
                                                    <i class="fa fa-usd"></i> 消费
                                                </a>
                                                <a class="btn btn-success" data-toggle="modal" data-target="#topup">
                                                    <i class="fa fa-money"></i> 充值
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h3 class="panel-title">消费记录</h3>
                                </div>
                                <c:if test="${empty bills}">
                                    <div class="panel-body">
                                        <h3>暂无消费记录</h3>
                                    </div>
                                </c:if>
                                <c:if test="${not empty bills}">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>消费类型</th>
                                            <th>消费金额</th>
                                            <th>消费日期</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:set var="i" value="0"/>
                                        <c:forEach items="${bills}" var="item">
                                            <c:set var="i" value="${i+1}"/>
                                            <tr>
                                                <th>${i}</th>
                                                <td>${SysDict['bill_type'][item.billtype]}</td>
                                                <td>${item.consumption}</td>
                                                <td>${item.costDate}</td>
                                                <td>
                                                    <a class="btn btn-sm btn-danger del_bill" billId="${item.id}">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </c:if>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%--footer--%>
<jsp:include page="../footer.jsp"/>

<!-- jQuery -->
<script src="${jquery}/jquery.js" charset="utf-8"></script>

<!-- JqueryUI -->
<script src="${jquery}/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${Bootstrap}/js/bootstrap.js"></script>
<!-- Owl-coursel -->
<script src="${Js}/front/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${Js}/front/magnific-popup/jquery.magnific-popup.min.js"></script>
<%--BeAlert--%>
<script src="${Resource}/BeAlert/BeAlert.js"></script>

<script src="${Js}/front/wallet.js"></script>
<!-- Script -->
<script src="${Js}/front/script.js"></script>


<script text="type/javascript" src="${Js}/front/input.js"></script>

<link rel="stylesheet" href="${Layui}/css/layui.css">
<script src="${Layui}/layui.js" charset="utf-8"></script>
<script>
    layui.use(['laypage'], function () {
        var $ = layui.jquery;
        var laypage = layui.laypage;

        laypage({
            cont: 'fullpage',
            pages: $('#pageCount').val(), //分页总数
            skip: true,
            curr: $('#pageIndex').val(),
            jump: function (obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                if (first !== true) {//是否首次进入页面
                    var pageIndex = obj.curr;//获取点击的页码
                    window.location.href = "/front/wallet?pageIndex=" + pageIndex;
                }
            }
        });
    });
</script>
<div class="modal fade" id="topup" style="margin-top: 10%;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </a>
                <h4 class="modal-title">
                    充值
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-8 col-md-8 form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 col-md-2 control-label f-bold">金额</label>
                            <div class="col-sm-9 col-md-9">
                                <input type="text" class="form-control" id="amount" placeholder="充值金额">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="btnSub" type="button" class="btn btn-success">充值</a>
                <a type="button" class="btn btn-default" data-dismiss="modal">关闭</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>